var q, h, de, S, te, ve, G, ge, X, J, K, N = {}, me = [], Pe = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, Y = Array.isArray;
function $(n, e) {
  for (var r in e) n[r] = e[r];
  return n;
}
function Z(n) {
  n && n.parentNode && n.parentNode.removeChild(n);
}
function be(n, e, r) {
  var t, i, _, c = {};
  for (_ in e) _ == "key" ? t = e[_] : _ == "ref" ? i = e[_] : c[_] = e[_];
  if (arguments.length > 2 && (c.children = arguments.length > 3 ? q.call(arguments, 2) : r), typeof n == "function" && n.defaultProps != null) for (_ in n.defaultProps) c[_] === void 0 && (c[_] = n.defaultProps[_]);
  return D(n, c, t, i, null);
}
function D(n, e, r, t, i) {
  var _ = { type: n, props: e, key: r, ref: t, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: i ?? ++de, __i: -1, __u: 0 };
  return i == null && h.vnode != null && h.vnode(_), _;
}
function C(n) {
  return n.children;
}
function L(n, e) {
  this.props = n, this.context = e;
}
function P(n, e) {
  if (e == null) return n.__ ? P(n.__, n.__i + 1) : null;
  for (var r; e < n.__k.length; e++) if ((r = n.__k[e]) != null && r.__e != null) return r.__e;
  return typeof n.type == "function" ? P(n) : null;
}
function ye(n) {
  var e, r;
  if ((n = n.__) != null && n.__c != null) {
    for (n.__e = n.__c.base = null, e = 0; e < n.__k.length; e++) if ((r = n.__k[e]) != null && r.__e != null) {
      n.__e = n.__c.base = r.__e;
      break;
    }
    return ye(n);
  }
}
function _e(n) {
  (!n.__d && (n.__d = !0) && S.push(n) && !I.__r++ || te !== h.debounceRendering) && ((te = h.debounceRendering) || ve)(I);
}
function I() {
  var n, e, r, t, i, _, c, l;
  for (S.sort(G); n = S.shift(); ) n.__d && (e = S.length, t = void 0, _ = (i = (r = n).__v).__e, c = [], l = [], r.__P && ((t = $({}, i)).__v = i.__v + 1, h.vnode && h.vnode(t), ee(r.__P, t, i, r.__n, r.__P.namespaceURI, 32 & i.__u ? [_] : null, c, _ ?? P(i), !!(32 & i.__u), l), t.__v = i.__v, t.__.__k[t.__i] = t, ke(c, t, l), t.__e != _ && ye(t)), S.length > e && S.sort(G));
  I.__r = 0;
}
function xe(n, e, r, t, i, _, c, l, s, a, f) {
  var o, p, u, y, w, x, d = t && t.__k || me, v = e.length;
  for (s = Ee(r, e, d, s), o = 0; o < v; o++) (u = r.__k[o]) != null && (p = u.__i === -1 ? N : d[u.__i] || N, u.__i = o, x = ee(n, u, p, i, _, c, l, s, a, f), y = u.__e, u.ref && p.ref != u.ref && (p.ref && ne(p.ref, null, u), f.push(u.ref, u.__c || y, u)), w == null && y != null && (w = y), 4 & u.__u || p.__k === u.__k ? s = we(u, s, n) : typeof u.type == "function" && x !== void 0 ? s = x : y && (s = y.nextSibling), u.__u &= -7);
  return r.__e = w, s;
}
function Ee(n, e, r, t) {
  var i, _, c, l, s, a = e.length, f = r.length, o = f, p = 0;
  for (n.__k = [], i = 0; i < a; i++) (_ = e[i]) != null && typeof _ != "boolean" && typeof _ != "function" ? (l = i + p, (_ = n.__k[i] = typeof _ == "string" || typeof _ == "number" || typeof _ == "bigint" || _.constructor == String ? D(null, _, null, null, null) : Y(_) ? D(C, { children: _ }, null, null, null) : _.constructor === void 0 && _.__b > 0 ? D(_.type, _.props, _.key, _.ref ? _.ref : null, _.__v) : _).__ = n, _.__b = n.__b + 1, c = null, (s = _.__i = Te(_, r, l, o)) !== -1 && (o--, (c = r[s]) && (c.__u |= 2)), c == null || c.__v === null ? (s == -1 && p--, typeof _.type != "function" && (_.__u |= 4)) : s !== l && (s == l - 1 ? p-- : s == l + 1 ? p++ : (s > l ? p-- : p++, _.__u |= 4))) : _ = n.__k[i] = null;
  if (o) for (i = 0; i < f; i++) (c = r[i]) != null && !(2 & c.__u) && (c.__e == t && (t = P(c)), He(c, c));
  return t;
}
function we(n, e, r) {
  var t, i;
  if (typeof n.type == "function") {
    for (t = n.__k, i = 0; t && i < t.length; i++) t[i] && (t[i].__ = n, e = we(t[i], e, r));
    return e;
  }
  n.__e != e && (e && n.type && !r.contains(e) && (e = P(n)), r.insertBefore(n.__e, e || null), e = n.__e);
  do
    e = e && e.nextSibling;
  while (e != null && e.nodeType === 8);
  return e;
}
function Te(n, e, r, t) {
  var i = n.key, _ = n.type, c = r - 1, l = r + 1, s = e[r];
  if (s === null || s && i == s.key && _ === s.type && !(2 & s.__u)) return r;
  if ((typeof _ != "function" || _ === C || i) && t > (s != null && !(2 & s.__u) ? 1 : 0)) for (; c >= 0 || l < e.length; ) {
    if (c >= 0) {
      if ((s = e[c]) && !(2 & s.__u) && i == s.key && _ === s.type) return c;
      c--;
    }
    if (l < e.length) {
      if ((s = e[l]) && !(2 & s.__u) && i == s.key && _ === s.type) return l;
      l++;
    }
  }
  return -1;
}
function oe(n, e, r) {
  e[0] === "-" ? n.setProperty(e, r ?? "") : n[e] = r == null ? "" : typeof r != "number" || Pe.test(e) ? r : r + "px";
}
function A(n, e, r, t, i) {
  var _;
  e: if (e === "style") if (typeof r == "string") n.style.cssText = r;
  else {
    if (typeof t == "string" && (n.style.cssText = t = ""), t) for (e in t) r && e in r || oe(n.style, e, "");
    if (r) for (e in r) t && r[e] === t[e] || oe(n.style, e, r[e]);
  }
  else if (e[0] === "o" && e[1] === "n") _ = e !== (e = e.replace(ge, "$1")), e = e.toLowerCase() in n || e === "onFocusOut" || e === "onFocusIn" ? e.toLowerCase().slice(2) : e.slice(2), n.l || (n.l = {}), n.l[e + _] = r, r ? t ? r.u = t.u : (r.u = X, n.addEventListener(e, _ ? K : J, _)) : n.removeEventListener(e, _ ? K : J, _);
  else {
    if (i == "http://www.w3.org/2000/svg") e = e.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
    else if (e != "width" && e != "height" && e != "href" && e != "list" && e != "form" && e != "tabIndex" && e != "download" && e != "rowSpan" && e != "colSpan" && e != "role" && e != "popover" && e in n) try {
      n[e] = r ?? "";
      break e;
    } catch {
    }
    typeof r == "function" || (r == null || r === !1 && e[4] !== "-" ? n.removeAttribute(e) : n.setAttribute(e, e == "popover" && r == 1 ? "" : r));
  }
}
function ie(n) {
  return function(e) {
    if (this.l) {
      var r = this.l[e.type + n];
      if (e.t == null) e.t = X++;
      else if (e.t < r.u) return;
      return r(h.event ? h.event(e) : e);
    }
  };
}
function ee(n, e, r, t, i, _, c, l, s, a) {
  var f, o, p, u, y, w, x, d, v, E, H, U, T, re, F, B, O, k = e.type;
  if (e.constructor !== void 0) return null;
  128 & r.__u && (s = !!(32 & r.__u), _ = [l = e.__e = r.__e]), (f = h.__b) && f(e);
  e: if (typeof k == "function") try {
    if (d = e.props, v = "prototype" in k && k.prototype.render, E = (f = k.contextType) && t[f.__c], H = f ? E ? E.props.value : f.__ : t, r.__c ? x = (o = e.__c = r.__c).__ = o.__E : (v ? e.__c = o = new k(d, H) : (e.__c = o = new L(d, H), o.constructor = k, o.render = Ne), E && E.sub(o), o.props = d, o.state || (o.state = {}), o.context = H, o.__n = t, p = o.__d = !0, o.__h = [], o._sb = []), v && o.__s == null && (o.__s = o.state), v && k.getDerivedStateFromProps != null && (o.__s == o.state && (o.__s = $({}, o.__s)), $(o.__s, k.getDerivedStateFromProps(d, o.__s))), u = o.props, y = o.state, o.__v = e, p) v && k.getDerivedStateFromProps == null && o.componentWillMount != null && o.componentWillMount(), v && o.componentDidMount != null && o.__h.push(o.componentDidMount);
    else {
      if (v && k.getDerivedStateFromProps == null && d !== u && o.componentWillReceiveProps != null && o.componentWillReceiveProps(d, H), !o.__e && (o.shouldComponentUpdate != null && o.shouldComponentUpdate(d, o.__s, H) === !1 || e.__v === r.__v)) {
        for (e.__v !== r.__v && (o.props = d, o.state = o.__s, o.__d = !1), e.__e = r.__e, e.__k = r.__k, e.__k.some(function(M) {
          M && (M.__ = e);
        }), U = 0; U < o._sb.length; U++) o.__h.push(o._sb[U]);
        o._sb = [], o.__h.length && c.push(o);
        break e;
      }
      o.componentWillUpdate != null && o.componentWillUpdate(d, o.__s, H), v && o.componentDidUpdate != null && o.__h.push(function() {
        o.componentDidUpdate(u, y, w);
      });
    }
    if (o.context = H, o.props = d, o.__P = n, o.__e = !1, T = h.__r, re = 0, v) {
      for (o.state = o.__s, o.__d = !1, T && T(e), f = o.render(o.props, o.state, o.context), F = 0; F < o._sb.length; F++) o.__h.push(o._sb[F]);
      o._sb = [];
    } else do
      o.__d = !1, T && T(e), f = o.render(o.props, o.state, o.context), o.state = o.__s;
    while (o.__d && ++re < 25);
    o.state = o.__s, o.getChildContext != null && (t = $($({}, t), o.getChildContext())), v && !p && o.getSnapshotBeforeUpdate != null && (w = o.getSnapshotBeforeUpdate(u, y)), l = xe(n, Y(B = f != null && f.type === C && f.key == null ? f.props.children : f) ? B : [B], e, r, t, i, _, c, l, s, a), o.base = e.__e, e.__u &= -161, o.__h.length && c.push(o), x && (o.__E = o.__ = null);
  } catch (M) {
    if (e.__v = null, s || _ != null) if (M.then) {
      for (e.__u |= s ? 160 : 128; l && l.nodeType === 8 && l.nextSibling; ) l = l.nextSibling;
      _[_.indexOf(l)] = null, e.__e = l;
    } else for (O = _.length; O--; ) Z(_[O]);
    else e.__e = r.__e, e.__k = r.__k;
    h.__e(M, e, r);
  }
  else _ == null && e.__v === r.__v ? (e.__k = r.__k, e.__e = r.__e) : l = e.__e = Me(r.__e, e, r, t, i, _, c, s, a);
  return (f = h.diffed) && f(e), 128 & e.__u ? void 0 : l;
}
function ke(n, e, r) {
  for (var t = 0; t < r.length; t++) ne(r[t], r[++t], r[++t]);
  h.__c && h.__c(e, n), n.some(function(i) {
    try {
      n = i.__h, i.__h = [], n.some(function(_) {
        _.call(i);
      });
    } catch (_) {
      h.__e(_, i.__v);
    }
  });
}
function Me(n, e, r, t, i, _, c, l, s) {
  var a, f, o, p, u, y, w, x = r.props, d = e.props, v = e.type;
  if (v === "svg" ? i = "http://www.w3.org/2000/svg" : v === "math" ? i = "http://www.w3.org/1998/Math/MathML" : i || (i = "http://www.w3.org/1999/xhtml"), _ != null) {
    for (a = 0; a < _.length; a++) if ((u = _[a]) && "setAttribute" in u == !!v && (v ? u.localName === v : u.nodeType === 3)) {
      n = u, _[a] = null;
      break;
    }
  }
  if (n == null) {
    if (v === null) return document.createTextNode(d);
    n = document.createElementNS(i, v, d.is && d), l && (h.__m && h.__m(e, _), l = !1), _ = null;
  }
  if (v === null) x === d || l && n.data === d || (n.data = d);
  else {
    if (_ = _ && q.call(n.childNodes), x = r.props || N, !l && _ != null) for (x = {}, a = 0; a < n.attributes.length; a++) x[(u = n.attributes[a]).name] = u.value;
    for (a in x) if (u = x[a], a != "children") {
      if (a == "dangerouslySetInnerHTML") o = u;
      else if (!(a in d)) {
        if (a == "value" && "defaultValue" in d || a == "checked" && "defaultChecked" in d) continue;
        A(n, a, null, u, i);
      }
    }
    for (a in d) u = d[a], a == "children" ? p = u : a == "dangerouslySetInnerHTML" ? f = u : a == "value" ? y = u : a == "checked" ? w = u : l && typeof u != "function" || x[a] === u || A(n, a, u, x[a], i);
    if (f) l || o && (f.__html === o.__html || f.__html === n.innerHTML) || (n.innerHTML = f.__html), e.__k = [];
    else if (o && (n.innerHTML = ""), xe(n, Y(p) ? p : [p], e, r, t, v === "foreignObject" ? "http://www.w3.org/1999/xhtml" : i, _, c, _ ? _[0] : r.__k && P(r, 0), l, s), _ != null) for (a = _.length; a--; ) Z(_[a]);
    l || (a = "value", v === "progress" && y == null ? n.removeAttribute("value") : y !== void 0 && (y !== n[a] || v === "progress" && !y || v === "option" && y !== x[a]) && A(n, a, y, x[a], i), a = "checked", w !== void 0 && w !== n[a] && A(n, a, w, x[a], i));
  }
  return n;
}
function ne(n, e, r) {
  try {
    if (typeof n == "function") {
      var t = typeof n.__u == "function";
      t && n.__u(), t && e == null || (n.__u = n(e));
    } else n.current = e;
  } catch (i) {
    h.__e(i, r);
  }
}
function He(n, e, r) {
  var t, i;
  if (h.unmount && h.unmount(n), (t = n.ref) && (t.current && t.current !== n.__e || ne(t, null, e)), (t = n.__c) != null) {
    if (t.componentWillUnmount) try {
      t.componentWillUnmount();
    } catch (_) {
      h.__e(_, e);
    }
    t.base = t.__P = null;
  }
  if (t = n.__k) for (i = 0; i < t.length; i++) t[i] && He(t[i], e, r || typeof n.type != "function");
  r || Z(n.__e), n.__c = n.__ = n.__e = void 0;
}
function Ne(n, e, r) {
  return this.constructor(n, r);
}
function Ue(n, e, r) {
  var t, i, _, c;
  e === document && (e = document.documentElement), h.__ && h.__(n, e), i = (t = typeof r == "function") ? null : e.__k, _ = [], c = [], ee(e, n = (!t && r || e).__k = be(C, null, [n]), i || N, N, e.namespaceURI, !t && r ? [r] : i ? null : e.firstChild ? q.call(e.childNodes) : null, _, !t && r ? r : i ? i.__e : e.firstChild, t, c), ke(_, n, c);
}
q = me.slice, h = { __e: function(n, e, r, t) {
  for (var i, _, c; e = e.__; ) if ((i = e.__c) && !i.__) try {
    if ((_ = i.constructor) && _.getDerivedStateFromError != null && (i.setState(_.getDerivedStateFromError(n)), c = i.__d), i.componentDidCatch != null && (i.componentDidCatch(n, t || {}), c = i.__d), c) return i.__E = i;
  } catch (l) {
    n = l;
  }
  throw n;
} }, de = 0, L.prototype.setState = function(n, e) {
  var r;
  r = this.__s != null && this.__s !== this.state ? this.__s : this.__s = $({}, this.state), typeof n == "function" && (n = n($({}, r), this.props)), n && $(r, n), n != null && this.__v && (e && this._sb.push(e), _e(this));
}, L.prototype.forceUpdate = function(n) {
  this.__v && (this.__e = !0, n && this.__h.push(n), _e(this));
}, L.prototype.render = C, S = [], ve = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, G = function(n, e) {
  return n.__v.__b - e.__v.__b;
}, I.__r = 0, ge = /(PointerCapture)$|Capture$/i, X = 0, J = ie(!1), K = ie(!0);
var Fe = 0;
function g(n, e, r, t, i, _) {
  e || (e = {});
  var c, l, s = e;
  "ref" in e && (c = e.ref, delete e.ref);
  var a = { type: n, props: s, key: r, ref: c, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --Fe, __i: -1, __u: 0, __source: i, __self: _ };
  if (typeof n == "function" && (c = n.defaultProps)) for (l in c) s[l] === void 0 && (s[l] = c[l]);
  return h.vnode && h.vnode(a), a;
}
var R, m, V, le, j = 0, $e = [], b = h, ce = b.__b, se = b.__r, ae = b.diffed, ue = b.__c, pe = b.unmount, fe = b.__;
function Ce(n, e) {
  b.__h && b.__h(m, n, j || e), j = 0;
  var r = m.__H || (m.__H = { __: [], __h: [] });
  return n >= r.__.length && r.__.push({}), r.__[n];
}
function W(n) {
  return j = 1, Ae(Se, n);
}
function Ae(n, e, r) {
  var t = Ce(R++, 2);
  if (t.t = n, !t.__c && (t.__ = [Se(void 0, e), function(l) {
    var s = t.__N ? t.__N[0] : t.__[0], a = t.t(s, l);
    s !== a && (t.__N = [a, t.__[1]], t.__c.setState({}));
  }], t.__c = m, !m.u)) {
    var i = function(l, s, a) {
      if (!t.__c.__H) return !0;
      var f = t.__c.__H.__.filter(function(p) {
        return !!p.__c;
      });
      if (f.every(function(p) {
        return !p.__N;
      })) return !_ || _.call(this, l, s, a);
      var o = t.__c.props !== l;
      return f.forEach(function(p) {
        if (p.__N) {
          var u = p.__[0];
          p.__ = p.__N, p.__N = void 0, u !== p.__[0] && (o = !0);
        }
      }), _ && _.call(this, l, s, a) || o;
    };
    m.u = !0;
    var _ = m.shouldComponentUpdate, c = m.componentWillUpdate;
    m.componentWillUpdate = function(l, s, a) {
      if (this.__e) {
        var f = _;
        _ = void 0, i(l, s, a), _ = f;
      }
      c && c.call(this, l, s, a);
    }, m.shouldComponentUpdate = i;
  }
  return t.__N || t.__;
}
function De(n) {
  return j = 5, Le(function() {
    return { current: n };
  }, []);
}
function Le(n, e) {
  var r = Ce(R++, 7);
  return Ie(r.__H, e) && (r.__ = n(), r.__H = e, r.__h = n), r.__;
}
function We() {
  for (var n; n = $e.shift(); ) if (n.__P && n.__H) try {
    n.__H.__h.forEach(z), n.__H.__h.forEach(Q), n.__H.__h = [];
  } catch (e) {
    n.__H.__h = [], b.__e(e, n.__v);
  }
}
b.__b = function(n) {
  m = null, ce && ce(n);
}, b.__ = function(n, e) {
  n && e.__k && e.__k.__m && (n.__m = e.__k.__m), fe && fe(n, e);
}, b.__r = function(n) {
  se && se(n), R = 0;
  var e = (m = n.__c).__H;
  e && (V === m ? (e.__h = [], m.__h = [], e.__.forEach(function(r) {
    r.__N && (r.__ = r.__N), r.i = r.__N = void 0;
  })) : (e.__h.forEach(z), e.__h.forEach(Q), e.__h = [], R = 0)), V = m;
}, b.diffed = function(n) {
  ae && ae(n);
  var e = n.__c;
  e && e.__H && (e.__H.__h.length && ($e.push(e) !== 1 && le === b.requestAnimationFrame || ((le = b.requestAnimationFrame) || ze)(We)), e.__H.__.forEach(function(r) {
    r.i && (r.__H = r.i), r.i = void 0;
  })), V = m = null;
}, b.__c = function(n, e) {
  e.some(function(r) {
    try {
      r.__h.forEach(z), r.__h = r.__h.filter(function(t) {
        return !t.__ || Q(t);
      });
    } catch (t) {
      e.some(function(i) {
        i.__h && (i.__h = []);
      }), e = [], b.__e(t, r.__v);
    }
  }), ue && ue(n, e);
}, b.unmount = function(n) {
  pe && pe(n);
  var e, r = n.__c;
  r && r.__H && (r.__H.__.forEach(function(t) {
    try {
      z(t);
    } catch (i) {
      e = i;
    }
  }), r.__H = void 0, e && b.__e(e, r.__v));
};
var he = typeof requestAnimationFrame == "function";
function ze(n) {
  var e, r = function() {
    clearTimeout(t), he && cancelAnimationFrame(e), setTimeout(n);
  }, t = setTimeout(r, 100);
  he && (e = requestAnimationFrame(r));
}
function z(n) {
  var e = m, r = n.__c;
  typeof r == "function" && (n.__c = void 0, r()), m = e;
}
function Q(n) {
  var e = m;
  n.__c = n.__(), m = e;
}
function Ie(n, e) {
  return !n || n.length !== e.length || e.some(function(r, t) {
    return r !== n[t];
  });
}
function Se(n, e) {
  return typeof e == "function" ? e(n) : e;
}
const Re = `* {\r
  padding: 0;\r
  margin: 0;\r
  box-sizing: border-box;\r
}\r
\r
.view-panel {\r
  position: relative;\r
  width: 100vw;\r
  height: 100vh;\r
  overflow: auto;\r
  background-color: rgb(31, 31, 31);\r
  color: rgba(255,255,255,0.5);\r
  .header-panel {\r
    position: absolute;\r
    top: 0;\r
    left: 0;\r
    display: flex;\r
    align-items: center;\r
    justify-content: space-between;\r
    padding: 0 20px;\r
    height: 40px;\r
    z-index: 3;\r
    .left {\r
      display: flex;\r
      .mod-btn {\r
        width: 28px;\r
        height: 28px;\r
        position: relative;\r
        cursor: pointer;\r
        transition: all 0.1s ease;\r
        &::after,\r
        &::before {\r
          content: '';\r
          position: absolute;\r
          left: 5px;\r
          bottom: 5px;\r
          width: 7px;\r
          height: 11px;\r
          border: 1px solid rgba(255,255,255,0.5);\r
          z-index: 2;\r
          background-color: rgb(31, 31, 31);\r
          transition: all 0.1s ease;\r
        }\r
        &::before {\r
          width: 14px;\r
          height: 10px;\r
          z-index: 1;\r
          left: auto;\r
          right: 4px;\r
          top: 4px;\r
          bottom: auto;\r
        }\r
        &:hover {\r
          box-shadow: 0 0 4px 1px rgba(255,255,255,0.9);\r
          &::after,\r
          &::before {\r
            box-shadow: 0 0 2px 1px rgba(255,255,255,0.9);\r
          }\r
        }\r
      }\r
      .input-panel {\r
        width: 200px;\r
        height: 30px;\r
        margin: 0 20px;\r
        input {\r
          width: 100%;\r
          height: 100%;\r
          outline: none;\r
          background: transparent;\r
          border: none;\r
          border-radius: 2px;\r
          color: rgba(255,255,255,0.5);\r
          &:focus {\r
            box-shadow: 0 0 4px 1px rgba(255,255,255,0.9);\r
          }\r
        }\r
      }\r
      button {\r
        width: 60px;\r
        height: 20px;\r
        font-size: 16px;\r
        background: transparent;\r
        border: none;\r
        cursor: pointer;\r
        &:hover {\r
          box-shadow: 0 0 4px 1px rgba(255,255,255,0.9);\r
        }\r
      }\r
      .hide-btn {\r
        width: 30px;\r
        height: 30px;\r
        border-radius: 4px;\r
        cursor: pointer;\r
        &:hover {\r
          box-shadow: 0 0 4px 1px rgba(255,255,255,0.9);\r
        }\r
      }\r
    }\r
  }\r
  .content-base {\r
    position: relative;\r
    padding-top: 40px;\r
    // width: 100%;\r
    // height: 100%;\r
    iframe {\r
      width: 100%;\r
      height: 100%;\r
      border: none;\r
      box-shadow: 0 0 4px 1px rgba(255,255,255,0.9);\r
    }\r
  }\r
  .pc {\r
    width: 100%;\r
    height: 100%;\r
  }\r
  .mobile {\r
    width: 375px;\r
    height: 700px;\r
    padding-left: 8px;\r
  }\r
  .bg-mask {\r
    width: 100%;\r
    height: 100%;\r
    background-color: rgb(31, 31, 31);\r
    position: absolute;\r
    top: 0;\r
    left: 0;\r
    z-index: 4;\r
    .show {\r
      width: 20px;\r
      height: 20px;\r
      cursor: pointer;\r
    }\r
    textarea {\r
      width: 100%;\r
      height: 80%;\r
      background-color: rgb(31, 31, 31);\r
      outline: none;\r
      border: none;\r
      color: #9cdcfe;\r
      padding: 20px;\r
      font-size: 14px;\r
    }\r
  }\r
}\r
\r
.flex-c-c {\r
  display: flex;\r
  align-items: center;\r
  justify-content: center;\r
}\r
.base-hover {\r
  &:hover {\r
    box-shadow: 0 0 4px 1px rgba(255,255,255,0.9);\r
  }\r
}\r
.hide {\r
  opacity: 0;\r
}`;
function je(n) {
  const { setIfSrc: e, setMode: r, setHide: t } = n, [i, _] = W("");
  return /* @__PURE__ */ g(C, { children: /* @__PURE__ */ g("div", { class: "header-panel", children: [
    /* @__PURE__ */ g("div", { class: "flex-c-c left", children: [
      /* @__PURE__ */ g("div", { class: "mod-btn", onClick: () => r() }),
      /* @__PURE__ */ g("div", { class: "input-panel", children: /* @__PURE__ */ g("input", { type: "text", onChange: (c) => {
        var l;
        return _((l = c.target) == null ? void 0 : l.value);
      } }) }),
      /* @__PURE__ */ g("button", { class: "flex-c-c", onClick: () => e(i), children: "🚀" }),
      /* @__PURE__ */ g("div", { onClick: () => t(), class: "flex-c-c hide-btn", children: "💻" })
    ] }),
    /* @__PURE__ */ g("div", {})
  ] }) });
}
function qe(n) {
  const { setHide: e, content: r, change: t } = n;
  return /* @__PURE__ */ g(C, { children: /* @__PURE__ */ g("div", { class: "bg-mask", children: [
    /* @__PURE__ */ g("div", { class: "show base-hover", onClick: () => e() }),
    /* @__PURE__ */ g("textarea", { value: r, onChange: (i) => t(i.target.value) })
  ] }) });
}
function Be() {
  const [n, e] = W(!1), [r, t] = W("pc"), [i, _] = W(""), c = De(null), l = (s) => {
    c.current.src = s;
  };
  return /* @__PURE__ */ g(C, { children: /* @__PURE__ */ g("div", { class: "view-panel", children: [
    /* @__PURE__ */ g(
      je,
      {
        setMode: () => t(r === "pc" ? "mobile" : "pc"),
        setIfSrc: (s) => l(s),
        setHide: () => e(!0)
      }
    ),
    /* @__PURE__ */ g("div", { class: `content-base ${r} ${n ? "hide" : ""}`, children: /* @__PURE__ */ g("iframe", { ref: c }) }),
    n ? /* @__PURE__ */ g(qe, { content: i, setHide: () => e(!1), change: (s) => _(s) }) : /* @__PURE__ */ g("div", {})
  ] }) });
}
class Oe extends HTMLElement {
  constructor() {
    var t;
    super();
    const e = this.attachShadow({ mode: "open" }), r = document.createElement("style");
    r.innerHTML = Re, (t = this.shadowRoot) == null || t.append(r), Ue(be(Be, {}), e);
  }
}
customElements.define("webview-panel", Oe);
